<template>
  <div class="box">
    <header class="header">
      <span>=</span>
      <div>请输入要购买的产品</div>
      <span>登录</span>
    </header>
    <div class="content" @scroll="onScroll" ref="contentRef">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <my-banner :bannerList="bannerList"></my-banner>
        <my-nav :navList="navList"></my-nav>
        <my-skill :sckillList="sckillList"></my-skill>
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <my-product :proList="proList" :scrollTop='scrollTop'></my-product>
        </van-list>
        <div class="backTop" v-if="scrollTop>300" @click="backTop">
          <van-icon name="back-top" />
        </div>
        <!-- <van-back-top right="15vw" bottom="10vh" style="background: gray" /> -->
      </van-pull-refresh>
    </div>
  </div>
</template>
<script setup>
import MyBanner from "./MyBanner.vue";
import MyNav from "./MyNav.vue";
import MySkill from "./MySkill.vue";
import MyProduct from "./MyProduct.vue";
import { ref, onMounted } from "vue";
import { getBannerList, getSeckilllist, getProList } from "@/api/home.js";
let bannerList = ref([]);
let sckillList = ref([]);
let proList = ref([]);
let navList = ref([
  {
    navid: 1,
    title: "嗨购超市",
    imgurl:
      "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png",
  },
  {
    navid: 2,
    title: "数码电器",
    imgurl:
      "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png",
  },
  {
    navid: 3,
    title: "嗨购服饰",
    imgurl:
      "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/41867/2/15966/7116/60ec0e0dE9f50d596/758babcb4f911bf4.png",
  },
  {
    navid: 4,
    title: "嗨购生鲜",
    imgurl:
      "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png",
  },
  {
    navid: 5,
    title: "嗨购到家",
    imgurl:
      "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png",
  },
  {
    navid: 6,
    title: "充值缴费",
    imgurl:
      "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png",
  },
  {
    navid: 7,
    title: "9.9元拼",
    imgurl:
      "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/36069/14/16068/6465/60ec0f67E155f9488/595ff3e606a53f02.png",
  },
  {
    navid: 8,
    title: "领券",
    imgurl:
      "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png",
  },
  {
    navid: 9,
    title: "领金贴",
    imgurl:
      "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196711/35/12751/6996/60ec1000E21b5bab4/38077313cb9eac4b.png",
  },
  {
    navid: 10,
    title: "plus会员",
    imgurl:
      "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png",
  },
]);
const loading = ref(false);
const finished = ref(false);
const scrollTop = ref(0)
const contentRef = ref(null);
// refreshing：是否处于加载中状态
const refreshing = ref(false);
const count = ref(3);
onMounted(() => {
  getBannerList().then(({ data: res }) => {
    bannerList.value = res.data;
  });
  getSeckilllist().then(({ data: res }) => {
    console.log(res.data);
    sckillList.value = res.data;
  });
  getProList({ count: 2, limitNum: 10 }).then(({ data: res }) => {
    proList.value = res.data;
  });
});
const onLoad = () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  getProList({ count: count.value, limitNum: 10 }).then(({ data: res }) => {
    // 3s后再加载下一页数据，
    setTimeout(() => {
      proList.value = [...proList.value, ...res.data];
      loading.value = false;
      count.value++;
      if (res.data.length == 0) {
        // 当为`true`时，不会再触发加载更多的事件。
        finished.value = true;
      }
    }, 3000);
  });
};
// 下拉刷新时触发
const onRefresh = () => {
  getProList().then(({ data: res }) => {
    setTimeout(() => {
      proList.value = res.data;
      refreshing.value = false;
      count.value = 2;
      // 将其设置为false，为了能够继续加载更多
      finished.value = false;
    }, 3000);
  });
};

const onScroll = ()=>{
  // console.log(111);
  console.log(contentRef.value.scrollTop);
  scrollTop.value = contentRef.value.scrollTop
}
const backTop = ()=>{
  contentRef.value.scrollTop = 0;
}
</script>

<style scoped lang='less'>
.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.box header {
  padding: 3px;
  height: 44px;
  background-color: brown;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box .content {
  flex: 1;
  overflow: auto;
}
.box .content .backTop{
  width: 40px;
  height: 40px;
  border:1px solid grey;
  background-color: #f6f6f6;
  position: fixed;
  bottom: 60px;
  right: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;

}
</style>